<template>
    <div class="my-picker">
        <div class="opener" @click="show()" :class="{left: textAlign === 'left', color: confirm && confirm !== '请选择'}">
            {{confirm?confirm:'请选择'}}
        </div>
        <picker :slots="slots" @change="onValuesChange" :value-key="'name'" :show-toolbar="showToolbar">
            <span style="float:left" @click="cancel">取消</span> <span style="float:right" @click="submit">确定</span>
        </picker>
    </div>
</template>

<script>
    import { Picker } from 'mint-ui';

    export default {
        components: {
            Picker
        },
        props: ['data', 'type', 'choose', 'chooseId', 'pickName', 'pickIdName', 'textAlign'],
        data() {
            return {
                showToolbar: true,
                confirm: '',
                confirmId: '',
                first: true
            };
        },
        computed: {
            slots() {
                return [{
                    flex: 1,
                    values: this.data,
                    className: 'slot1',
                    textAlign: 'center',
                    defaultIndex: 0
                }];
            }
        },
        created() {
            this.confirm = this.choose;
            this.confirmId = this.chooseId;
        },
        methods: {
            show() {
                document.querySelector('.picker').style.height = '4.42rem';
                if (this.first) {
                    var slot = document.querySelectorAll('.slot1 .picker-slot-wrapper')[0];
                    var first = document.querySelectorAll('.slot1 .picker-slot-wrapper .picker-item')[0];

                    if (document.querySelectorAll('.slot1 .picker-slot-wrapper .picker-selected')[0]) {
                        var highlight = document.querySelectorAll('.slot1 .picker-slot-wrapper .picker-selected')[0];
                        highlight.className = 'picker-item';
                    }

                    first.className = 'picker-item picker-selected';
                    slot.style.webkitTransform = 'translate(0px, 72px) translateZ(0px)';
                }
            },
            onValuesChange(picker, values) {
                // 请选择时是否需要显示原数据？
                if (!values[0]) {
                    values = [{'name': '请选择', 'number': null}];
                    picker.setSlotValue(0, values[0]);
                } else {
                    var first = document.querySelectorAll('.slot1 .picker-slot-wrapper .picker-item')[0];
                    first.className = 'picker-item';
                    this.first = false;
                }

                var value = this.pickIdName;
//                if (this.choose === '请选择') {
//                    this.confirm = this.choose;
//                    return;
//                }
                this.confirm = values[0].name;
                this.confirmId = values[0][value];

                console.log(this.confirmId);
 //                this.$emit('onValuesChange', values[0], this.type);
            },
            close() {
                document.querySelector('.picker').style.height = '0';
                this.first = true;
            },
            cancel() {
                if (this.type) {
                    this.$emit('cancel', this.type);
                }
                this.confirm = this.choose || '请选择';
                this.close();
            },
            submit() {
//                this[type] = this[type + 'Choose'];
//                this[type + 'Id'] = this[type + 'ChooseId'];
//                this[type + 'Confirm'] = true;
                if (this.type) {
                    this.$emit('confirm', this.type);
                }
                this.$emit('confirm', this.confirmId, this.confirm);
                this.close();
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "../css/var.less";

    .opener {
        text-align: right;
        &.left {
            text-align: left;
        }
        &.color {
            color: #333 !important;
        }
    }
    .picker .first {
        transform: translate(0px, 72px) translateZ(0px) !important;
    }
</style>
